<template>
  <el-dialog
    @close="onClose"
    width="1300px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :fullscreen="true"
    :show-close="false"
    :visible.sync="pdfMaxShow"
    :title="title"
  >
    <img
      src="@/assets/imgs/close.png"
      title="关闭"
      class="pdf-max-view-close"
      @click="onClose"
    />
    <el-card class="box-card pdf-bookmark" shadow="hover">
      <el-button
        type="primary"
        round
        icon="el-icon-paperclip"
        @click="onAdd()"
        v-if="recordId != ''"
        >添加书签</el-button
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="" width="200">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleGoTo(scope.$index, scope.row)"
              >第 {{ scope.row.pageNum }} 页：{{ scope.row.title }}</el-link
            >
          </template>
        </el-table-column>

        <el-table-column label="" width="50">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="160"
              :ref="`popover-${scope.$index}`"
              trigger="click"
            >
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" @click="quxiao(scope)">取消</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleDelete(scope.$index, scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                slot="reference"
                circle
              ></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div style="height: 800px; width: 1024px; margin: 0 auto" v-if="isPdfShow">
      <!-- <PdfView
        ref="pdfView"
        pdfUrl="/js/demo.pdf"
        :recordId="recordId"
      ></PdfView> -->
      <PdfView ref="pdfView" :pdfUrl="pdfUrl" :recordId="recordId"></PdfView> 
      <!-- <iframe src="/js/demo.pdf" style="width:1600px;height:800px;"></iframe> -->
      <!-- <embed src="/js/demo.pdf" style="height: 100%; width: 99%" /> -->
    </div>
    <el-dialog
      width="500px"
      title="添加书签"
      append-to-body
      :visible.sync="addBookmarkVisible"
    >
      <el-input
        v-model="bookmarkText"
        placeholder="请输入书签名称"
        type="textarea"
        :rows="2"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addBookmarkSave">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>
    <script>
const PdfView = () => import("../../../components/PdfView2");
export default {
  name: "PdfMaxView",
  components: {
    PdfView,
  },
  data() {
    return {
      pdfMaxShow: false,
      recordId: "",
      pdfUrl: "",
      tableData: [],
      isPdfShow: false,
      addBookmarkVisible: false,
      bookmarkText: "", //
    };
  },
  mounted() {},
  methods: {
    quxiao(ee) {
      ee._self.$refs[`popover-${ee.$index}`].doClose();
    },
    open(title, recordId, pdfUrl) {
      this.recordId = recordId;
      this.pdfUrl = pdfUrl;
      this.pdfMaxShow = true;
      this.queryBookmarkList();
      this.isPdfShow = true;
      this.title = title;
    },
    onClose() {
      this.pdfMaxShow = false
    },
    queryBookmarkList() {
      var that = this;
      //获取书签列表
      utils.post(
        "/curriculum/queryBookmarkList",
        {
          recordId: this.recordId,
        },
        (res) => {
          if (res.code === 1) {
            that.tableData = res.data;
          }
        }
      );
    },
    onAdd() {
      this.bookmarkText = "";
      this.addBookmarkVisible = true;
    },
    addBookmarkSave() {
      var that = this;
      if (that.bookmarkText == "") {
        this.$message.error("请输入书签名称");
        return;
      }
      //保存书签
      utils.post(
        "/curriculum/saveBookmark",
        {
          recordId: that.recordId,
          pageNum: that.$refs.pdfView.currentPage,
          title: that.bookmarkText,
        },
        (res) => {
          if (res.code === 1) {
            that.bookmarkText = "";
            that.addBookmarkVisible = false;
            that.$message({
              type: "success",
              message: "书签保存成功",
            });
            that.queryBookmarkList();
          }
        }
      );
    },
    handleDelete(index, record) {
      var that = this;
      //删除书签
      utils.post(
        "/curriculum/deleteBookmark",
        {
          id: record.id,
        },
        (res) => {
          if (res.code === 1) {
            that.$message({
              type: "success",
              message: "书签删除成功",
            });
            that.queryBookmarkList();
          }
        }
      );
    },
    handleGoTo(index, record) {
      this.$refs.pdfView.goTo(record.pageNum);
    },
  },
};
</script>
<style lang="less">
.pdf-bookmark {
  width: 260px;
  border: 1px solid #ddd;
  height: 500px;
  position: fixed;
  top: 100px;
  left: 50px;
  z-index: 998;
  background: #fff;
  padding: 20px 0;
  text-align: center;
}
.pdf-max-view-close {
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 15px;
}
</style>